<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/person/fontawesome/css/font-awesome.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .head {
        height: 70px;
        position: relative;
        display: flex;
        align-items: center;
    }

    .head .title {
        margin-left: 20px;
    }

    .head .content {
        margin-left: 20px;
        font-size: 14px;
    }

    .head .content span {
        margin: 0px 5px 0px;
        color: red;
    }

    .container {
        width: 100%;
        height: inherit;
        border-top: 2px dotted #ccc;
        border-bottom: 2px dotted #ccc;
        background-color: #f3f3f3;

    }
    .container .content{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .container .content .itemHead{
        width:650px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    .container .content .itemHead span {
        color:red
    }

    .container .content .itemContent{
        width: 650px;
    }
    .container .content .itemContent table thead tr{
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: #b2bec3;
        font-size: 14px;
        font-weight: bold;
    }
    .container .content .itemContent table thead tr td:nth-of-type(1){
        width: 270px;
    }
    .container .content .itemContent table thead tr td:nth-of-type(2){
        width: 200px;
    }
    .container .content .itemContent table thead tr td:nth-of-type(3){
        width: 180px;
    }
    .container .content .itemContent table tbody tr{
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: #dfe6e9;
        font-size: 14px;
        font-weight: bold;
    }
	/* span{*/
	/*	display: inline-block;*/
	/*	width: 200px;*/
	/*	text-align: center;*/
	/*}*/
</style>
<body>
<div class="head">
    <div class="title">
        <img src="/images/person/Vrecord.png" alt="">
    </div>
</div>
<div class="container" id="record">
    <div class="content">
        <div class="itemHead">
            <div class="itemHeadLeft">我的投票纪录</div>
            <div class="itemHeadRight">当前月票：<span v-for="(r,index) in recordList" v-if="index==0"> {{r.monthTicket}} </span></div>
        </div>
        <div class="itemContent">
            <ul style="list-style: none">
				<li>
					<div class="title" style="background-color: grey">
						<span style="display: inline-block;width: 200px;text-align: center;height: 30px;">投票时间</span>
						<span style="display: inline-block;width: 200px;text-align: center;height: 30px;">投票漫画</span>
						<span style="display: inline-block;width: 200px;text-align: center;height: 30px;">票数</span>
					</div>
				</li>
				<li class="info" v-for="r in recordList">
					<div>
						<span style="display: inline-block;width: 200px;text-align: center;height: 30px">{{r.ticektTime}}</span>
						<span style="display: inline-block;width: 200px;text-align: center;height: 30px">{{r.rname}}</span>
						<span style="display: inline-block;width: 200px;text-align: center;height: 30px">{{r.ticketCount}}</span>
					</div>
				</li>
			</ul>
        </div>
    </div>
</div>

<script th:inline="javascript">
	var userInfo = [[${session.loginUser}]]
</script>
<script>
let recordApp = new Vue({
	el:"#record",
	data:{
		recordList:[],
		uid:userInfo.id,
	},
	methods:{
		getRecordList(){
			let url = 'http://localhost:9999/user/getRecord'
			axios.get(url,{
				params:{
					uid:this.uid
				}
			}).then((resp)=>{
				this.recordList=resp.data.data
			})
		},
	},
	created(){
		this.getRecordList()
	}
})
</script>
</body>
</html>